<template>
  <Card>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: left;">
        <ButtonGroup shape="circle" size="small">
          <Button v-if="showAddButton" @click="addAction">新增</Button>
          <Button @click="refreshAction">刷新</Button>
        </ButtonGroup>
      </div>
      <div style="float: right;">
        <Page :total="insideTotalCount" :current="insidePageIndex" :page-size="insidePageSize" @on-change="onChangePage" size="small" show-total show-elevator></Page>
      </div>
    </div>
    <Table :data="insideTableData" :columns="insideColumns" :loading="insideLoading" size="small" :stripe="stripe"></Table>
  </Card>
</template>

<script>
export default {
  name: 'ListPage',
  props: {
    columns: {
      type: Array,
      default () {
        return []
      }
    },
    columnKey: {
      type: String,
      default: 'id'
    },
    data: {
      type: Array,
      default () {
        return []
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    pageSize: {
      type: Number,
      default: 10
    },
    totalCount: {
      type: Number,
      default: 0
    },
    pageIndex: {
      type: Number,
      default: 1
    },
    // 自动增加操作列
    autoActionColumn: {
      type: Boolean,
      default: true
    },
    stripe: {
      type: Boolean,
      default: false
    },
    showAddButton: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      insideColumns: [],
      insideTableData: [],
      insideLoading: false,
      insidePageSize: 10,
      insideTotalCount: 10,
      insidePageIndex: 1,
      insideAutoActionColumn: true,
      modalTitle: 'title',
      modalShow: false,
      insideFormRef: 'editForm',
      insideFormData: {},
      insideValidateRule: {}
    }
  },
  methods: {
    handleColumns (columns) {
      this.insideColumns = columns.map((item, index) => {
        let res = item
        return res
      })
      if (this.autoActionColumn) {
        this.insideColumns.push({
          title: '操作',
          key: this.columnKey,
          align: 'center',
          fixed: 'right',
          width: 200,
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'default',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      // console.log(params)
                      this.editAction(params)
                    }
                  }
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'default',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.deleteAction(params)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        })
      }
    },
    handleData (data) {
      this.insideTableData = data.map((item, index) => {
        let res = item
        res.initRowIndex = index
        return res
      })
    },
    handleLoading (loading) {
      this.insideLoading = loading
    },
    handlePageSize (pageSize) {
      this.insidePageSize = pageSize
    },
    handleTotalCount (totalCount) {
      this.insideTotalCount = totalCount
    },
    handelPageIndex (pageIndex) {
      this.insidePageIndex = pageIndex
    },
    handleAutoActionColumn (autoActionColumn) {
      this.insideAutoActionColumn = autoActionColumn
      this.handleColumns(this.columns)
    },
    onChangePage: function (currentPageIndex) {
      this.insidePageIndex = currentPageIndex
      this.loadData()
    },
    // 打开新增窗口
    addAction () {
      this.$emit('show-add')
    },
    // 刷新列表
    refreshAction () {
      this.loadData()
    },
    editAction (params) {
      console.log('show edit')
      this.$emit('show-edit', params)
    },
    deleteAction (params) {
      this.$Modal.confirm({
        title: '删除',
        content: '确定要删除么？',
        onOk: () => {
          this.$emit('delete-handle', params)
        }
      })
    },
    // 加载数据
    loadData () {
      const pageInfo = {
        pageIndex: this.insidePageIndex,
        pageSize: this.insidePageSize
      }
      this.$emit('load-data', pageInfo)
    }
  },
  created () {
    this.loadData()
  },
  watch: {
    columns (columns) {
      this.handleColumns(columns)
    },
    data (data) {
      this.handleData(data)
    },
    loading (loading) {
      this.handleLoading(loading)
    },
    pageSize (pageSize) {
      this.handlePageSize(pageSize)
    },
    totalCount (totalCount) {
      this.handleTotalCount(totalCount)
    },
    pageIndex (pageIndex) {
      this.handelPageIndex(pageIndex)
    },
    autoActionColumn (autoActionColumn) {
      this.handleAutoActionColumn(autoActionColumn)
    }
  },
  mounted () {
    this.handleAutoActionColumn(this.autoActionColumn)
    this.handleColumns(this.columns)
    this.handleData(this.data)
    this.handleLoading(this.loading)
    this.handlePageSize(this.pageSize)
    this.handleTotalCount(this.totalCount)
    this.handelPageIndex(this.pageIndex)
  }
}
</script>

<style>
</style>
